<template>
<!--  <el-select style="width: 100%" v-if="auth === 'edit'" v-model="model" :class="wrapperClass"-->
<!--             :placeholder="placeholder" @change="fieldValueChange">-->
<!--    <el-option v-for="opt in opts" :key="opt.dictValue" :label="opt.dictTitle" :value="opt.dictValue"/>-->
<!--  </el-select>-->

  <el-radio-group style="width: 100%" @change="fieldValueChange"
                  v-if="auth === 'edit'" v-model="model" :class="wrapperClass">
    <el-radio v-for="opt in opts" :label="opt.dictValue">{{opt.dictTitle}}</el-radio>
  </el-radio-group>

<!--  <el-select style="width: 100%" v-else-if="auth === 'browse'" v-model="model" :class="wrapperClass"-->
<!--             :placeholder="placeholder" disabled>-->
<!--    <el-option v-for="opt in opts" :key="opt.dictValue" :label="opt.dictTitle" :value="opt.dictValue"/>-->
<!--  </el-select>-->

  <el-radio-group style="width: 100%" v-else-if="auth === 'browse'" v-model="model" :class="wrapperClass"
                  :placeholder="placeholder" disabled>
    <el-radio v-for="opt in opts" :label="opt.dictValue">{{opt.dictTitle}}</el-radio>
  </el-radio-group>


<!--  <div style="width: 100%" v-else-if="auth === 'hide'" v-model="model" :class="wrapperClass"-->
<!--             :placeholder="placeholder" disabled>-->
<!--  </div>-->

  <el-text truncated v-else-if="auth === 'static'">
    {{ historyTitle }}
  </el-text>
</template>
<script setup>
import {computed, defineProps, ref, shallowRef, unref, watchEffect} from 'vue';
import {DefaultFieldDefinition} from '@/components/form/DefaultFormDefinition';
import {isEmpty, real} from '@/utils/CommonUtils';
import './textInput.css';
import {getAction} from '@/request/BaseRequest';

const props = defineProps({
  auth: {
    type: String,
    default: 'static'
  },
  notNull: {
    type: String,
    default: '0' //0表示非必填, 1表示必填
  },
  field: {
    type: Object,
    default() {
      return DefaultFieldDefinition;
    }
  }
});
const model = shallowRef();
const emits = defineEmits(['fieldValueChange']);
const opts = shallowRef([]);
const historyTitle = shallowRef();

function getFieldValue(rowData) {
  rowData[`${real(props.field).tableFieldName}_dictText`] = getTitle();
  return unref(model);
}

function getTitle() {
  let value = real(model), res = undefined;
  let list = real(opts);
  for (let i = 0; i < list.length; i++) {
    if (list[i].dictValue + '' === value + '') {
      res = list[i].dictTitle
    }
  }
  return res;
}

function resetField() {
  model.value = undefined;
}

function setFieldValue(value, obj) {
  if (isEmpty(value)) {
    model.value = undefined;
    historyTitle.value = undefined;
    return;
  }
  try {
    model.value = parseInt(value + '');
    historyTitle.value = obj[`${real(props.field).tableFieldName}_dictText`]
  } catch (e) {}
}

function fieldValueChange() {
  emits('fieldValueChange', props.field);
}

function getFieldValueText() {
  return getTitle();
}

function getFieldValueWithCheck(rowData) {
  if (props.notNull + '' === '1' && isEmpty(model.value)) {
    throw new Error('请将必填项填写完整');
  }
  return model.value;
}

const placeholder = computed(() => {
  if (isEmpty(props.field.id)) return '';
  return `请输入${props.field.alias ? props.field.alias : props.field.showName}`;
});

const wrapperClass = computed(() => {
  return {
    notNull: props.notNull === '1' && isEmpty(model.value)
  };
});

watchEffect(() => {
  if (isEmpty(props.field) || isEmpty(real(props.field))) {
    return;
  }

  let dictCode = real(props.field);
  loadDictOptions();
});

function loadDictOptions() {
  getAction('/plat/platDict/loadDictByCode',
    {dictCode: props.field.dictCode}).then(data => {
    if (data.success) {
      let result = data.result;
      opts.value = result.items;
    }
  });
}

defineExpose({
  getFieldValue,
  setFieldValue,
  resetField,
  getFieldValueText,
  getFieldValueWithCheck,
});
</script>
